<script setup lang="ts">
import {useRoute, useRouter} from 'vue-router'
import {computed, onBeforeMount, onMounted, onUpdated, reactive, ref} from "vue";
import axios from "axios";
import Footer from "../components/Footer.vue";


const route = useRoute()
const router = useRouter()

let user = ref({
  userid:sessionStorage.getItem("userId"),
  password:"",
  username:sessionStorage.getItem("userName"),
  usersex:sessionStorage.getItem("userSex"),
  userimg:""
})
let userT = sessionStorage.getItem("user")
let url = "http://localhost:8080"

function toHistoryOrders(url: string){
  if(userT == null ){
    router.push("/login")
  }else{
    router.push(url)
  }
}

function toIndex(url: string){
  router.push(url)
}
</script>

<template>
  <ul class="footer w-full h-[14vw] border-t-1 border-solid bg-white fixed left-0 bottom-0 flex justify-around items-center">
    <li class="hover:text-#0097EF flex flex-col justify-center items-center cursor-pointer text-[#999] select-none" @click="toIndex('/')">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="text-[2.8vw] fa-fa-home" viewBox="0 0 24 24"><path fill="currentColor" d="M4 19v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-3q-.425 0-.712-.288T14 20v-5q0-.425-.288-.712T13 14h-2q-.425 0-.712.288T10 15v5q0 .425-.288.713T9 21H6q-.825 0-1.412-.587T4 19Z"/></svg>
      <p class="text-[3.5vw]">首页</p>
    </li>
    <li class="hover:text-#0097EF flex flex-col justify-center items-center cursor-pointer text-[#999] select-none">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="text-[2.8vw] fa-fa-compass" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M11.307 9.739L15 9l-.739 3.693a2 2 0 0 1-1.568 1.569L9 15l.739-3.693a2 2 0 0 1 1.568-1.568Z"/></g></svg>
      <p class="text-[3.5vw]">发现</p>
    </li>
    <li class="hover:text-#0097EF flex flex-col justify-center items-center cursor-pointer text-[#999] select-none" @click="toHistoryOrders('/historyOrders')">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="text-[2.8vw] fa-fa-file-text-o" viewBox="0 0 24 24"><path fill="currentColor" d="M4 19q-.425 0-.712-.288T3 18q0-.425.288-.712T4 17h16q.425 0 .713.288T21 18q0 .425-.288.713T20 19H4Zm0-4q-.425 0-.712-.288T3 14q0-.425.288-.712T4 13h16q.425 0 .713.288T21 14q0 .425-.288.713T20 15H4Zm0-4q-.425 0-.712-.288T3 10q0-.425.288-.712T4 9h16q.425 0 .713.288T21 10q0 .425-.288.713T20 11H4Zm0-4q-.425 0-.712-.288T3 6q0-.425.288-.712T4 5h16q.425 0 .713.288T21 6q0 .425-.288.713T20 7H4Z"/></svg>
      <p class="text-[3.5vw]">订单</p>
    </li>
    <li class="hover:text-#0097EF flex flex-col justify-center items-center cursor-pointer text-[#999] select-none">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="text-[2.8vw] fa-fa-user-o" viewBox="0 0 24 24"><path fill="currentColor" d="M9.775 12q-.9 0-1.5-.675T7.8 9.75l.325-2.45q.2-1.425 1.3-2.363T12 4q1.475 0 2.575.938t1.3 2.362l.325 2.45q.125.9-.475 1.575t-1.5.675h-4.45ZM4 20v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13q1.65 0 3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20H4Z"/></svg>
      <p class="text-[3.5vw]">我的</p>
    </li>
  </ul>

</template>

<style scoped>

</style>